<template>
  <div class="recommend-outer">
    <div class="recommend">
      <h2 class="recommend-title">
        <span>为您推荐</span>
      </h2>
      <div class="recommend-bd">
        <ul class="recommend-list clearfix">
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
          <RecmmendItem></RecmmendItem>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import RecmmendItem from '@/components/recommend/recommendItem/index.vue'
</script>

<style lang="less" scoped>
.recommend-outer {
  margin: 60px 0 0;
  .recommend {
    .recommend-title {
      position: relative;
      margin: 0;
      height: 50px;
      font-size: 30px;
      font-weight: 400;
      color: #757575;
      border-top: 1px solid #e0e0e0;
      span {
        position: absolute;
        top: -20px;
        left: 372px;
        height: 40px;
        width: 482px;
        line-height: 40px;
        text-align: center;
        display: block;
        background-color: #f5f5f5;
        font-size: 30px;
        font-weight: 400;
        color: #757575;
      }
    }
    .recommend-bd {
      .recommend-list {
        margin: 0 0 0 -14px;
        padding: 0;
      }
    }
  }
}
</style>
